import React from 'react'
import { Menu } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';
import { withRouter } from "react-router-dom";
class appMenu extends React.Component {
  state = {
    // orderInfo:{}
    menuList: [
      {
        key: 'statistics11',
        name: '数据统计-父级',
        children: [
          {
            key: 'statistics1',
            name: '数据统计-父级',
            children: [
              {
                key: 'statistics',
                name: '数据统计',
              }
            ]
          }
        ]
      },
      {
        key: 'table',
        name: '表格'
      },
      {
        key: 'test001',
        name: '测试-父级',
        children: [
          {
            key: 'test01',
            name: '测试-父级',
            children: [
              {
                key: 'test',
                name: '测试',
              }
            ]
          }
        ]
      },
    ],
    selectedKeys: [],
    openKeys: [],
    showMenu: false,
    activeRouter:''
  }
  getOpenKey(arr, target) {
    return new Promise(function (resolve, reject) {
      let getKey = function (arr, target, list = []) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].key === target) {
            return resolve([...list, arr[i].key])
          } else {
            if (arr[i].children) {
              getKey(arr[i].children, target, [...list, arr[i].key])
            }
          }
        }
      }
      try {
        getKey(arr, target)
      } catch (err) {
        reject(err)
      }
    })
  }
  UNSAFE_componentWillMount() {
    // setTimeout(()=>{
    //   this.setState({
    //     menuList:[...this.state.menuList,{
    //       key:'abc',
    //       name:'测试'
    //     }]
    //   })
    // },2000)
    // console.log(this.props.location.pathname.slice(1),'============');
    let target = this.props.location.pathname.slice(1)
    this.getOpenKey(this.state.menuList, target).then(val => {
      this.setState({
        openKeys: val,
        showMenu: true
      })
    }).catch(err => {
      console.log(err, '============');
    })
    this.setState({
      selectedKeys: [target],
      activeRouter:target
      // openKeys
    })
  }
  render() {
    let changeRouter = e => {
      if (this.state.activeRouter!==e.key) {
        this.setState({
          activeRouter:e.key
        })
        this.props.history.push(e.key)
      }
    };
    let testFun = ({ item, key, keyPath, selectedKeys, domEvent }) => {
      console.log(item, key, keyPath, selectedKeys, domEvent, '============testFun');
    }
    let menuNode = (data) => {
      return data.map(it => {
        if (it.children) {
          return (
            <Menu.SubMenu onTitleClick={testFun} icon={<AppstoreOutlined />} title={it.name} key={it.key}>{menuNode(it.children)}</Menu.SubMenu>
          )
        }
        return (
          <Menu.Item key={it.key}>{it.name}</Menu.Item>
        )
      })
    }
    return (
      <div className="menu">
        {this.state.showMenu ? (
          <Menu
            onClick={changeRouter}
            mode="inline"
            defaultSelectedKeys={this.state.selectedKeys}
            defaultOpenKeys={this.state.openKeys}
          >
            {menuNode(this.state.menuList)}
          </Menu>) : ''}
      </div>
    );
  }

}
export default withRouter(appMenu)